<div ng-init="init();" class="kmi-layout-content SMT2501-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'SMT2501.title' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="kmi-report-panel"></div>
            <div class="kmi-list column-selector" column-selector-id="SMT2501_workItemList">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex:0 0 40px">
                        <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="selectAll();">
                            <img ng-if="!isSelectAll" src="image/icons/check0.png"></img>
                            <img ng-if="isSelectAll"  src="image/icons/check1.png"></img>
                        </button>
                    </div>
                    <!-- 料捲編號 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column1' | translate"></div>
                    <!-- 物料編號 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column2' | translate"></div>
                    <!-- 原始數量 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column3' | translate"></div>
                    <!-- 剩餘數量 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column4' | translate"></div>
                    <!-- 有效日期 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column5' | translate"></div>
                    <!-- 製造商 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column6' | translate"></div>
                    <!-- 製造商料號 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column7' | translate"></div>
                    <!-- 生產批號 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column8' | translate"></div>
                    <!-- 生產日期 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column9' | translate"></div>
                    <!-- 是否編輯 -->
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2501.column_list.column10' | translate"></div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in reel_info_list track by $index">
                        <div class="kmi-list__column" style="flex:0 0 40px;">
                            <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="item.btn_mode = !item.btn_mode">
                                <img ng-show="!item.btn_mode" src="image/icons/check0.png"></img>
                                <img ng-show="item.btn_mode" src="image/icons/check1.png"></img>
                            </button>
                        </div>
                        <!-- 料捲編號 -->
                        <div class="kmi-list__column" style="flex:1;" ng-bind="item.reel_no"></div>
                        <!-- 物料編號 -->
                        <div class="kmi-list__column column-input" style="flex:1; z-index: 1;position:relative">
                            <input type="text" ng-model="item.material_no" readonly="readonly" ng-disabled='!item.edit' ng-click="material_open(item);"></input>
                            <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                        </div> 
                        <!-- 原始數量 -->
                        <div class="kmi-list__column column-input" style="flex:1; z-index: 1;">
                            <input type="text" mdl-calculater="item.qty" ng-disabled='!item.edit'></input>
                        </div>
                        <!-- 剩餘數量 -->
                        <div class="kmi-list__column column-input" style="flex:1; z-index: 1;">
                            <input type="text" mdl-calculater="item.actual_qty" ng-disabled='!item.edit'></input>
                        </div>
                        <!-- 有效日期 -->
                        <div class="kmi-list__column column-input" style="flex:1; z-index: 1;">
                            <input type="text" mdl-datepicker='item.exp_date' ng-disabled='!item.edit'></input>
                        </div>
                        <!-- 製造商 -->
                        <div class="kmi-list__column column-input" style="flex:1;">
                            <input type="text" ng-model='item.mnf' ng-disabled='!item.edit'></input>
                        </div>
                        <!-- 製造商料號 -->
                        <div class="kmi-list__column column-input" style="flex:1;">
                            <input type="text" ng-model='item.mnf_partno' ng-disabled='!item.edit'></input>
                        </div>
                        <!-- 生產批號 -->
                        <div class="kmi-list__column column-input" style="flex:1; z-index: 1;">
                            <input type="text" ng-model='item.lot_no' ng-disabled='!item.edit'></input>
                        </div>
                        <!-- 生產日期 -->
                        <div class="kmi-list__column column-input" style="flex:1; z-index: 1;">
                            <input type="text" mdl-datepicker="item.mfg_date" ng-disabled='!item.edit'></input>
                        </div>
                        <!-- 是否編輯 -->
                        <div class="kmi-list__column" style="flex:1; height: 25px; z-index: 1;">
                            <div class="check-point-switch" ng-class="{'is-selected':item.edit}" ng-click="item.edit = !item.edit">
                                <div style="width:24px;height:24px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="kmi-layout-footer">
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1"
            ng-click="confirm();">
              <i class="material-icons">done</i>
            </button>
        </div>
    </div>
</div>
